import 'package:flutter/material.dart'; // Material UI组件库
import 'dart:ui';

class TabViewDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _TabViewState();
  }
}

class _TabViewState extends State<TabViewDemo> with SingleTickerProviderStateMixin {

  TabController mController;// tab控制器

  final List<Tab> titleTabs = <Tab>[
    Tab(
      text: 'Android',
    ),
    Tab(
      text: 'iOS',
    ),
    Tab(
      text: 'Web',
    ),

  ];

  @override
  void initState() {
    super.initState();

    mController = TabController(initialIndex: 0,length: 3, vsync: this);
    // 初始化TabController
    // 参数1：初试显示的tab位置
    // 参数2：tab的个数
    // 参数3：动画效果的异步处理，默认格式

    // 添加监听器
    mController.addListener(() => _onTabChanged());

  }

  @override
  Widget build(BuildContext context) {
    return  new Scaffold(
      // 创建TabBar & 设置属性
      appBar: new TabBar(
        controller: mController,// 设置控制器
        labelColor: Colors.green, //选中的颜色
        labelStyle: TextStyle(fontSize: 16), //选中的样式
        unselectedLabelColor: Colors.black, //未选中的颜色
        unselectedLabelStyle: TextStyle(fontSize: 14), //未选中的样式
        indicatorColor: Colors.green, //下划线颜色
        isScrollable: false, //是否可滑动，设置不可滑动，则是tab的宽度等长
        //tab标签
        tabs: titleTabs, // 设置标题

        //点击事件
        onTap: (int i) {
          print(i+10);
        },
      ),
      body: new TabBarView(
        controller: mController,
        children:  <Widget>[ // 每个空间对应的页面
          Center(child:Text('Android')),
          Center(child:Text('iOS')),
          Center(child:Text('Web')),
        ],
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    mController.dispose(); // 当整个页面dispose时，记得把控制器也dispose掉，释放内存
  }

  // 点击监听函数
  _onTabChanged() {
    print(mController.index);
  }
}